   {% extends "base.html" %}

   {% block title %}盲盒列表 - 盲盒超市管理系统{% endblock %}

   {% block content %}
   <div class="row mb-4">
       <div class="col-12 d-flex justify-content-between align-items-center">
           <h2 class="mb-0"><i class="fas fa-box me-2"></i>盲盒列表</h2>
           <a href="{{ url_for('blind_box.add') }}" class="btn btn-primary">
               <i class="fas fa-plus-circle me-1"></i>添加盲盒
           </a>
       </div>
   </div>

   <!-- 筛选器 -->
   <div class="card mb-4 shadow-sm">
       <div class="card-header bg-light">
           <h5 class="mb-0"><i class="fas fa-filter me-2"></i>筛选条件</h5>
       </div>
       <div class="card-body">
           <form method="GET" action="{{ url_for('blind_box.list') }}">
               <div class="row">
                   <div class="col-md-4 mb-2">
                       <label for="category" class="form-label">商品分类</label>
                       <select class="form-select" id="category" name="category">
                           <option value="">所有分类</option>
                           {% for category in categories %}
                           <option value="{{ category }}" {% if request.args.get('category') == category %}selected{% endif %}>{{ category }}</option>
                           {% endfor %}
                       </select>
                   </div>
                   <div class="col-md-4 mb-2">
                       <label for="status" class="form-label">状态</label>
                       <select class="form-select" id="status" name="status">
                           <option value="">全部状态</option>
                           <option value="1" {% if request.args.get('status') == '1' %}selected{% endif %}>上架</option>
                           <option value="0" {% if request.args.get('status') == '0' %}selected{% endif %}>下架</option>
                       </select>
                   </div>
                   <div class="col-md-4 mb-2">
                       <label for="market_id" class="form-label">所属超市</label>
                       <select class="form-select" id="market_id" name="market_id">
                           <option value="">所有超市</option>
                           {% for market in supermarkets %}
                           <option value="{{ market.market_id }}" {% if request.args.get('market_id')|int == market.market_id %}selected{% endif %}>{{ market.name }}</option>
                           {% endfor %}
                       </select>
                   </div>
               </div>
               <div class="d-flex justify-content-end mt-3">
                   <button type="submit" class="btn btn-primary">
                       <i class="fas fa-search me-1"></i>查询
                   </button>
                   <a href="{{ url_for('blind_box.list') }}" class="btn btn-secondary ms-2">
                       <i class="fas fa-redo me-1"></i>重置
                   </a>
               </div>
           </form>
       </div>
   </div>

   <!-- 盲盒列表 -->
   <div class="card shadow-sm">
       <div class="card-body">
           <div class="table-responsive">
               <table class="table table-hover table-sortable">
                   <thead>
                       <tr>
                           <th data-sort="id" scope="col">#</th>
                           <th data-sort="name" scope="col">盲盒名称</th>
                           <th data-sort="market" scope="col">所属超市</th>
                           <th data-sort="category" scope="col">分类</th>
                           <th data-sort="price" scope="col">价格</th>
                           <th data-sort="stock" scope="col">库存</th>
                           <th data-sort="status" scope="col">状态</th>
                           <th scope="col">操作</th>
                       </tr>
                   </thead>
                   <tbody>
                       {% for box in blind_boxes %}
                       <tr>
                           <td data-id="{{ box.box_id }}">{{ box.box_id }}</td>
                           <td>{{ box.name }}</td>
                           <td>
                               {% for market in supermarkets %}
                                   {% if market.market_id == box.market_id %}
                                       {{ market.name }}
                                   {% endif %}
                               {% endfor %}
                           </td>
                           <td>{{ box.category }}</td>
                           <td data-price="{{ box.discount_price }}">
                               <span class="text-danger">¥{{ box.discount_price }}</span>
                               <br>
                               <small class="text-muted text-decoration-line-through">¥{{ box.original_price }}</small>
                           </td>
                           <td data-stock="{{ box.stock }}">
                               {% if box.stock == 0 %}
                               <span class="badge bg-danger">缺货</span>
                               {% elif box.stock < 10 %}
                               <span class="badge bg-warning text-dark">低库存({{ box.stock }})</span>
                               {% else %}
                               {{ box.stock }}
                               {% endif %}
                           </td>
                           <td data-status="{{ box.status }}">
                               {% if box.status == 1 %}
                               <span class="badge bg-success">上架</span>
                               {% else %}
                               <span class="badge bg-secondary">下架</span>
                               {% endif %}
                           </td>
                           <td>
                               <div class="btn-group">
                                   <a href="{{ url_for('blind_box.detail', box_id=box.box_id) }}" class="btn btn-sm btn-info">
                                       <i class="fas fa-eye"></i>
                                   </a>
                                   <a href="{{ url_for('blind_box.edit', box_id=box.box_id) }}" class="btn btn-sm btn-primary">
                                       <i class="fas fa-edit"></i>
                                   </a>
                                   <a href="{{ url_for('analytics.sales_prediction', type='forecast', category=box.category, box_id=box.box_id, auto='true') }}" class="btn btn-sm btn-secondary" title="分析销售趋势">
                                       <i class="fas fa-chart-line"></i>
                                   </a>
                                   <a href="{{ url_for('blind_box.toggle_status', box_id=box.box_id) }}" class="btn btn-sm {% if box.status == 1 %}btn-warning{% else %}btn-success{% endif %}">
                                       <i class="fas {% if box.status == 1 %}fa-eye-slash{% else %}fa-eye{% endif %}"></i>
                                   </a>
                                   <a href="{{ url_for('blind_box.delete', box_id=box.box_id) }}" class="btn btn-sm btn-danger btn-delete">
                                       <i class="fas fa-trash"></i>
                                   </a>
                               </div>
                           </td>
                       </tr>
                       {% else %}
                       <tr>
                           <td colspan="8" class="text-center py-4">
                               <div class="text-muted">
                                   <i class="fas fa-box fa-3x mb-3"></i>
                                   <p>暂无盲盒数据</p>
                                   <a href="{{ url_for('blind_box.add') }}" class="btn btn-primary btn-sm">
                                       <i class="fas fa-plus-circle me-1"></i>添加盲盒
                                   </a>
                               </div>
                           </td>
                       </tr>
                       {% endfor %}
                   </tbody>
               </table>
           </div>
       </div>
   </div>
   {% endblock %}